<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="css/widgets.css" rel="stylesheet"/>
    <title>geo server</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/Sandcastle-header.js"></script>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/Cesium.js"></script>
    <style>

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<style>
    @import url(css/bucket.css);

    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }

    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var provider = new Cesium.WebMapServiceImageryProvider({
        url: 'http://localhost:8080/geoserver/cesium/wms',
        layers: 'cesium:test',
        parameters: {
            service : 'WMS',
            format: 'image/png',
            transparent: true,
        }
    });
    viewer.imageryLayers.addImageryProvider(provider);
</script>

</body>
</html>
